<template>
  <div>
    <canvas id ="canvas" class="home-page" width="800" height="800">

    </canvas>
  </div>

</template>

<script>
export default {
  name: 'Canvas1',
  data() {
    return {
      isTodayFirst: true,
      showStartPage: true,
      canvas: '',
      ctx: '',
      centerX: '',
      centerY: ''
    }
  },
  mounted () {
    // this.initCanvas()
    // this.drawRain()
    // this.drawSolar()
    // this.drawChart()
    // this.drawCircle()
    // this.fullCircle()
    // this.testSave()
    // this.drawSmile()
  },
  methods: {
    initCanvas () {
      this.canvas = document.getElementById('canvas')
      this.ctx = this.canvas.getContext('2d')
      this.centerX = this.canvas.width / 2
      this.centerY = this.canvas.height / 2
    },
    drawRain() {
      // let _self = this
      // const V0 = 0 // 初速度
      const Vg = 10 // 重力加速度
      let time = 0 // 时间
      const positionX = 10
      let positionY = 0
      const ctx = document.getElementById('canvas').getContext('2d')
      function draw() {
        time += 1
        ctx.clearRect(0, 0, 800, 800) // clear canvas
        positionY = Vg * time * time / 2 // 自由落体公式
        ctx.beginPath()
        ctx.fillStyle = '#ffffff'
        ctx.arc(positionX, positionY, 5, 0, Math.PI * 2, false)
        ctx.fill()
      }
      function init() {
        setInterval(() => {
          draw()
        }, 1000 / 1000)
      }
      init()
    },
    drawSolar() {
      var sun = new Image()
      var moon = new Image()
      var earth = new Image()
      function init() {
        sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'
        moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'
        earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'
        window.requestAnimationFrame(draw)
      }

      function draw() {
        var ctx = document.getElementById('canvas').getContext('2d')
        console.log(ctx)
        ctx.globalCompositeOperation = 'destination-over'
        ctx.clearRect(0, 0, 300, 300) // clear canvas

        ctx.fillStyle = 'rgba(0,0,0,0.4)'
        ctx.strokeStyle = 'rgba(0,153,255,0.4)'
        ctx.save()
        ctx.translate(150, 150)

        // Earth
        var time = new Date()
        ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds())
        ctx.translate(105, 0)
        ctx.fillRect(0, -12, 50, 24) // Shadow
        ctx.drawImage(earth, -12, -12)

        // Moon
        ctx.save()
        ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds())
        ctx.translate(0, 28.5)
        ctx.drawImage(moon, -3.5, -3.5)
        ctx.restore()

        ctx.restore()

        ctx.beginPath()
        ctx.arc(150, 150, 105, 0, Math.PI * 2, false) // Earth orbit
        ctx.stroke()

        ctx.drawImage(sun, 0, 0, 300, 300)

        window.requestAnimationFrame(draw)
      }

      init()
    },
    drawChart() { // 二次贝塞尔曲线
      this.ctx.beginPath()
      this.ctx.moveTo(75, 25)
      this.ctx.quadraticCurveTo(25, 25, 25, 62.5)
      this.ctx.quadraticCurveTo(25, 100, 50, 100)
      this.ctx.quadraticCurveTo(50, 120, 30, 125)
      this.ctx.quadraticCurveTo(60, 120, 65, 100)
      this.ctx.quadraticCurveTo(125, 100, 125, 62.5)
      this.ctx.quadraticCurveTo(125, 25, 75, 25)
      this.ctx.strokeStyle = '#ffffff'
      this.ctx.stroke()
    },
    drawSmile() {
      this.ctx.beginPath()
      this.ctx.arc(400, 400, 300, 0, Math.PI * 2, false)
      this.ctx.moveTo(600, 400)
      this.ctx.arc(400, 400, 200, 0, Math.PI, false)
      this.ctx.moveTo(375, 350)
      this.ctx.arc(325, 350, 50, 0, Math.PI * 2, false) // 左眼
      this.ctx.moveTo(525, 350)
      this.ctx.arc(475, 350, 50, 0, Math.PI * 2, false) // 右眼
      this.ctx.strokeStyle = '#ffffff'
      // this.ctx.moveTo(400, 400)
      this.ctx.stroke()
    },
    fullCircle() {
      for (let i = 0; i < 800 / 80; i++) {
        for (let j = 0; j < 800 / 80; j++) {
          this.centerX = 40 + i * 80
          this.centerY = 40 + j * 80
          this.drawCircle()
        }
      }
    },
    testSave() {
      this.ctx.beginPath()
      this.ctx.strokeStyle = '#ffffff' // strokeStyle 线得属性 fillStyle 填充得属性
      this.ctx.moveTo(0, 0)
      this.ctx.lineTo(800, 800)
      this.ctx.stroke()
      this.ctx.beginPath()
      this.ctx.strokeStyle = '#ffffff' // strokeStyle 线得属性 fillStyle 填充得属性
      this.ctx.moveTo(0, 800)
      this.ctx.lineTo(0, 800)
      this.ctx.stroke()
    },
    randomColor () {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ')' // 所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
    },
    drawCircle () {
      this.ctx.save()
      this.ctx.beginPath()
      this.ctx.lineWidth = 2 // 设置线宽
      const color = this.randomColor()
      this.ctx.strokeStyle = color
      this.ctx.fillStyle = color
      this.ctx.arc(this.centerX, this.centerY, 40, 0, Math.PI * 2, false)
      // this.ctx.stroke() // 划圈
      this.ctx.fill() // 填充
      this.ctx.closePath()
      this.ctx.restore()
    },
    drawPath () {
      this.ctx.beginPath()
      this.ctx.strokeStyle = '#ffffff' // strokeStyle 线得属性 fillStyle 填充得属性
      this.ctx.moveTo(this.centerX, this.centerY)
      this.ctx.lineTo(0, 0)
      this.ctx.stroke()
    }

  }
}
</script>

<style lang="scss" scoped>
  .home-page{
    display: block;
    width:800px;
    height:800px;
    background: #2d2f33;
    border:1px solid #ddd;
    margin:100px auto;
  }
</style>
